<template>
  <div class="container-wrap">
    <!-- :style="{ width: width }" -->
    <span v-if="isEdit">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        format="yyyy/MM/dd"
        value-format="timestamp"
        range-separator="至"
        start-placeholder="生效时间"
        end-placeholder="失效时间"
        :default-time="timeDefault"
        style="width: 100%"
        @change="toPreview"
        @blur="toBlur"
      />
    </span>
    <span v-else class="desc">
      <span>{{ parseTime(dateRange[0], '{y}-{m}-{d}') }} - {{ parseTime(dateRange[1], '{y}-{m}-{d}') }}</span>
      <el-icon v-if="!onlyRead" :size="18" class="edit" @click="toEdit">
        <edit></edit>
      </el-icon>
    </span>
  </div>
</template>

<script lang="ts" setup>
import { parseTime } from '@/utils'
import { updateKeyBuilder } from '@/utils/updater'
import { ObjTy } from '~/common'
const props = defineProps({
  staticStatus: {
    type: Boolean,
    default: null
  },
  row: {
    type: Object,
    default() {
      return {}
    }
  },
  onlyRead: {
    type: Boolean,
    default: false
  },
  idKey: {
    type: String,
    default: ''
  },
  timeStartKey: {
    type: String,
    default: ''
  },
  timeEndKey: {
    type: String,
    default: ''
  },
  timeStartDefault: {
    type: String,
    default: '00:00:00'
  },
  timeEndDefault: {
    type: String,
    default: '23:59:59'
  }
})

const isEdit = ref(false)
const dateRange = ref([new Date(), new Date()])

const updateKey = computed(() => {
  const key1 = +props.row[props.idKey] | 0
  const key2 = datetimeStart
  const key3 = datetimeEnd
  return updateKeyBuilder([key1, key2, key3])
})
const datetimeStart = computed(() => {
  const dateStr = parseTime(props.row[props.timeStartKey] || new Date(), '{y}-{m}-{d}')
  const datetimeStr = `${dateStr} ${props.timeStartDefault}`
  return datetimeStr
})
const datetimeEnd = computed(() => {
  const dateStr = parseTime(props.row[props.timeEndKey] || new Date(), '{y}-{m}-{d}')
  const datetimeStr = `${dateStr} ${props.timeEndDefault}`
  return datetimeStr
})
const timeDefault = computed(() => {
  return [props.timeStartDefault, props.timeEndDefault]
})
watch(
  () => updateKey,
  (n, o) => {
    resetVal()
    toStatic()
  }
)
watch(
  () => props.staticStatus,
  (n, o) => {
    isEdit.value = false
    toStatic()
  }
)

onMounted(() => {
  resetVal()
  toStatic()
})

const resetVal = () => {
  const startTime = new Date(datetimeStart)
  const endTime = new Date(datetimeEnd)
  dateRange.value = [startTime, endTime]
}
const toStatic = () => {
  if (props.staticStatus !== null) {
    isEdit.value = props.staticStatus
  }
}
const toEdit = () => {
  isEdit.value = true
  toStatic()
}
const emit = defineEmits(['update-value'])
const toPreview = () => {
  const obj: ObjTy = {}
  // obj[idKey] =props. row[props.idKey]
  // obj[timeStartKey] = dateRange.value[0]
  // obj[timeEndKey] = dateRange.value[1]

  emit('update-value', obj)
  isEdit.value = false
  toStatic()
}
const toBlur = () => {
  isEdit.value = false
  toStatic()
}
</script>

<style lang="scss" scoped>
@use './styles/field.scss';
@include field.inject;
</style>
